import Taro, {Component} from '@tarojs/taro'
import {View} from '@tarojs/components'
import './cata.scss'
import {getEvent} from '../../utils/common'
let myEvent = getEvent();
export default class Cata extends Component {
    constructor() {
        super(...arguments);
        this.state = {
            selectCata:null,
            cata: [{name: '专场', id: 1},
                    {name: '热销', id: 2},
                    {name: '折扣', id: 3},
                    {name: '主食', id: 4},
                    {name: '凉菜', id: 5},
                    {name: '特色菜', id: 6},
                    {name: '熟食', id: 7},
                ]
        }
    }
    changeTab(item){
        if(this.state.selectCata && this.state.selectCata.id != item.id){
            this.setState({selectCata:item},()=>{
                this.props.onChangeCata && this.props.onChangeCata(this.state.selectCata)
            })
            myEvent.emit('changeCata')
        }else if(this.state.selectCata == null){
            this.setState({selectCata:item});
            this.props.onChangeCata && this.props.onChangeCata(item);
            myEvent.emit('changeCata')
        }
    }
    render() {
        const {cata,selectCata} = this.state;
        return (
            <View className='cata'>
                {
                    cata.map((item,index)=>{
                        return <View
                            key={index}
                            onClick={this.changeTab.bind(this,item)}
                            className={'cata-name ' +(selectCata&&selectCata.id == item.id ? 'select' : '')}>{item.name}</View>
                    })
                }
            </View>
        )
    }
}
